<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>013-CSS伪类</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 20px;
				background-color: #f4f4f9;
			}
			table {
				width: 100%;
				border-collapse: collapse;
				margin: 20px 0;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}
			thead {
				background-color: #3498db;
				color: white;
			}
			th,
			td {
				padding: 12px;
				text-align: left;
				border: 1px solid #ddd;
			}
			tbody tr:nth-child(even) {
				background-color: #f9f9f9;
			}
			tbody tr:hover {
				background-color: #f1f1f1;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<caption>
				<h2>所有CSS伪类选择器</h2>
			</caption>
			<thead>
				<tr>
					<th>选择器</th>
					<th>示例</th>
					<th>示例说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>:checked</td>
					<td>input:checked</td>
					<td>选择所有选中的表单元素</td>
				</tr>
				<tr>
					<td>:disabled</td>
					<td>input:disabled</td>
					<td>选择所有禁用的表单元素</td>
				</tr>
				<tr>
					<td>:empty</td>
					<td>p:empty</td>
					<td>选择所有没有子元素的p元素</td>
				</tr>
				<tr>
					<td>:enabled</td>
					<td>input:enabled</td>
					<td>选择所有启用的表单元素</td>
				</tr>
				<tr>
					<td>:first-of-type</td>
					<td>p:first-of-type</td>
					<td>选择的每个 p 元素是其父元素的第一个 p 元素</td>
				</tr>
				<tr>
					<td>:in-range</td>
					<td>input:in-range</td>
					<td>选择元素指定范围内的值</td>
				</tr>
				<tr>
					<td>:invalid</td>
					<td>input:invalid</td>
					<td>选择所有无效的元素</td>
				</tr>
				<tr>
					<td>:last-child</td>
					<td>p:last-child</td>
					<td>选择所有p元素的最后一个子元素</td>
				</tr>
				<tr>
					<td>:last-of-type</td>
					<td>p:last-of-type</td>
					<td>选择每个p元素是其母元素的最后一个p元素</td>
				</tr>
				<tr>
					<td>:not(selector)</td>
					<td>:not(p)</td>
					<td>选择所有p以外的元素</td>
				</tr>
				<tr>
					<td>:nth-child(n)</td>
					<td>p:nth-child(2)</td>
					<td>选择所有 p 元素的父元素的第二个子元素</td>
				</tr>
				<tr>
					<td>:nth-last-child(n)</td>
					<td>p:nth-last-child(2)</td>
					<td>选择所有p元素倒数的第二个子元素</td>
				</tr>
				<tr>
					<td>:nth-last-of-type(n)</td>
					<td>p:nth-last-of-type(2)</td>
					<td>选择所有p元素倒数的第二个为p的子元素</td>
				</tr>
				<tr>
					<td>:nth-of-type(n)</td>
					<td>p:nth-of-type(2)</td>
					<td>选择所有p元素第二个为p的子元素</td>
				</tr>
				<tr>
					<td>:only-of-type</td>
					<td>p:only-of-type</td>
					<td>选择所有仅有一个子元素为p的元素</td>
				</tr>
				<tr>
					<td>:only-child</td>
					<td>p:only-child</td>
					<td>选择所有仅有一个子元素的p元素</td>
				</tr>
				<tr>
					<td>:optional</td>
					<td>input:optional</td>
					<td>选择没有"required"的元素属性</td>
				</tr>
				<tr>
					<td>:out-of-range</td>
					<td>input:out-of-range</td>
					<td>选择指定范围以外的值的元素属性</td>
				</tr>
				<tr>
					<td>:read-only</td>
					<td>input:read-only</td>
					<td>选择只读属性的元素属性</td>
				</tr>
				<tr>
					<td>:read-write</td>
					<td>input:read-write</td>
					<td>选择没有只读属性的元素属性</td>
				</tr>
				<tr>
					<td>:required</td>
					<td>input:required</td>
					<td>选择有"required"属性指定的元素属性</td>
				</tr>
				<tr>
					<td>:root</td>
					<td>root</td>
					<td>选择文档的根元素</td>
				</tr>
				<tr>
					<td>:target</td>
					<td>#news:target</td>
					<td>选择当前活动#news元素(点击URL包含锚的名字)</td>
				</tr>
				<tr>
					<td>:valid</td>
					<td>input:valid</td>
					<td>选择所有有效值的属性</td>
				</tr>
				<tr>
					<td>:link</td>
					<td>a:link</td>
					<td>选择所有未访问链接</td>
				</tr>
				<tr>
					<td>:visited</td>
					<td>a:visited</td>
					<td>选择所有访问过的链接</td>
				</tr>
				<tr>
					<td>:active</td>
					<td>a:active</td>
					<td>选择正在活动链接</td>
				</tr>
				<tr>
					<td>:hover</td>
					<td>a:hover</td>
					<td>把鼠标放在链接上的状态</td>
				</tr>
				<tr>
					<td>:focus</td>
					<td>input:focus</td>
					<td>选择元素输入后具有焦点</td>
				</tr>
				<tr>
					<td>:first-letter</td>
					<td>p:first-letter</td>
					<td>选择每个 &lt;p&gt;元素的第一个字母</td>
				</tr>
				<tr>
					<td>:first-line</td>
					<td>p:first-line</td>
					<td>选择每个 &lt;p&gt;元素的第一行</td>
				</tr>
				<tr>
					<td>:first-child</td>
					<td>p:first-child</td>
					<td>选择器匹配属于任意元素的第一个子元素的 &lt;p&gt;元素</td>
				</tr>
				<tr>
					<td>:before</td>
					<td>p:before</td>
					<td>在每个 &lt;p&gt;元素之前插入内容</td>
				</tr>
				<tr>
					<td>:after</td>
					<td>p:after</td>
					<td>在每个 &lt;p&gt;元素之后插入内容</td>
				</tr>
				<tr>
					<td>:lang(language)</td>
					<td>p:lang(it)</td>
					<td>为 &lt;p&gt;元素的lang属性选择一个开始值</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
